<template>
  <div>
    <div class="content-header">
      <h1>
        预约管理
        <small>预约设置</small>
      </h1>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>预约管理</el-breadcrumb-item>
        <el-breadcrumb-item>预约设置</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="app-container">
      <div class="box">
        <div class="ordersetting">
          <el-card class="box-card">
            <div class="boxMain">
              <el-button style="margin-bottom: 20px;margin-right: 20px" type="primary" @click="downloadTemplate">模板下载
              </el-button>
              <el-upload action="api/ordersetting/importOrderSettings" name="excelFile" :show-file-list="false"
                         :auto-upload="autoUpload" :before-upload="beforeAvatarUpload" :on-success="handleSuccess">
                <el-button type="primary">上传文件</el-button>
              </el-upload>
            </div>
            <div>
              操作说明：请点击"模板下载"按钮获取模板文件，在模板文件中录入预约设置数据
              <span style="color: red">(日期格式为：yyyy/MM/dd)</span>后点击"上传文件"按钮上传模板文件。
            </div>
          </el-card>
          <el-calendar v-model="curday">
            <template
              slot="dateCell"
              slot-scope="{date, data}">
              <div v-if="settingData[data.day]">
                <div v-if="settingData[data.day].number > 0">
                  <!--已满-->
                  <div v-if="settingData[data.day].number == settingData[data.day].reservations"
                       style="background-color:red;height:75px;padding-top: 10px;">
                    <div><font color='blue'>{{data.day}}</font></div>
                    <div>{{settingData[data.day].reservations}}/{{settingData[data.day].number}}</div>
                    <div>已满</div>
                  </div>
                  <!--未满-->
                  <div v-else style="background-color:lightblue;height:75px;padding-top: 10px;">
                    <div><font color='blue'>{{data.day}}</font></div>
                    <div>{{settingData[data.day].reservations}}/{{settingData[data.day].number}}</div>

                    <!--<div>{{getNowFormatDate()}}</div>-->
                    <!--<div>{{data.day}}</div>-->

                    <div v-if="data.day>=getNowFormatDate()">
                      <button @click="goSetting(data.day,settingData[data.day].number)"><i
                        class="el-icon-setting"></i>设置
                      </button>
                    </div>
                  </div>
                </div>
                <!--<div style="height:85px;" v-else>
                  <div><font color='blue'>{{data.day}}</font></div>
                  <div>
                    <button
                      @click="goSetting(data.day,0)"><i class="el-icon-setting"></i>设置
                    </button>
                  </div>
                </div>-->
              </div>
              <div v-else style="background-color:rgb(192,196,204);height:85px;width:100%;">
                <div style="padding: 25px;"><font color='gray'>{{data.day}}</font></div>
                <!--<div>{{// settingData[data.day].reservations}}/{{settingData[data.day].number}}</div>-->
              </div>
            </template>
          </el-calendar>
        </div>
      </div>
    </div>
    <el-dialog title="预约设置" :visible.sync="settingDialog" width="30%" top="15%">
      <div>日期:{{settingDay}}</div>
      <el-input v-model="number" placeholder="输入预约总人数"></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="settingDialog = false">取消</el-button>
        <el-button type="primary" @click="sureSetting">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        curday: new Date(),
        autoUpload: true, //自动上传
        settingData: {
          // '2020-11-01':{number:200,reservations:200},
          // '2020-11-02':{number:200,reservations:100},
          // '2020-11-15':{number:200,reservations:0}
        },
        settingDay: "",
        settingDialog: false,
        number: ""
      };
    },
    watch: {
      //  监听 当前 日期的变化  curday   只要curday值发生变化  函数function 就会触发
      curday: function (newDate,oldDate) {
        //判断如果日期变化后，不是相同月份就触发后台数据加载
        // console.log(oldDate)
        // console.log(newDate)
        if (oldDate.getMonth() != newDate.getMonth()) {
          this.loadData(newDate.getFullYear(), newDate.getMonth() + 1);//  获取后台指定月份对应得数据
        }
      }
    },
    methods: {
      //上传成功提示
      handleSuccess(response, file) {
        this.$message({
          message: "导入成功",
          type: "success"
        });
      },
      //上传图片之前执行
      beforeAvatarUpload(file) {
        const isXlsx = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
        if (!isXlsx) {
          this.$message.error('必须上传xlsx文件');
        }
        return isXlsx; //   返回值决定 文件是否上传 action 如果 true  自动向action发送文件上传请求
      },
      getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
      },

      goSetting: function (day, _num) {
        this.settingDay = day;
        this.number = _num;
        this.settingDialog = true;
      }
      ,
      loadData: function (year, month) {
        this.$http.get('api/ordersetting/findSettingData/' + year + "/" + month).then(res => {
          console.log(res.data)
          if (res.data.flag) {
            this.settingData = res.data.data
            // this.$message.success(res.data.message)
          } else {
            this.$message.error(res.data.message)
          }
        })
      }
      ,
      sureSetting: function () {
        this.settingDialog = false
        //   this.settingDay  当前点击的日期  this.number  当前设置的预约数字
        this.$http.put('api/ordersetting/updateOrderSettingData/' + this.settingDay + "/" + this.number).then(res => {
          if (res.data.flag) {
            this.$message.success(res.data.message)
          }
        })
        this.settingData[this.settingDay].number = this.number
        // alert(this.settingDay+"==="+this.number)
      }
      ,
      downloadTemplate: function () {
        window.open("api/template/ordersetting_template.xlsx", "_parent");
      }
    },
    created() {
      this.loadData(this.curday.getFullYear(), this.curday.getMonth() + 1);
    }
  }
  ;
</script>

<style scoped>
  .el-calendar-table .el-calendar-day {
    padding: 0;
  }
</style>
